<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Induction Diagram</title>
</head>
<body>

<canvas id="physicsDiagram" width="550" height="300" style="border:1px solid #000;"></canvas>

<script>
    const canvas = document.getElementById('physicsDiagram');
    const ctx = canvas.getContext('2d');

    // --- Style and Font ---
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // --- Helper Function to draw an arrow ---
    function drawArrow(x1, y1, x2, y2, headlen = 8) {
        const dx = x2 - x1;
        const dy = y2 - y1;
        const angle = Math.atan2(dy, dx);
        
        ctx.beginPath();
        // Draw the line part
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        
        // Draw the arrowhead
        ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }
    
    // --- Drawing Parameters ---
    const yTop = 80;
    const yBottom = 220;
    const railStart = 70;
    const railEnd = 470;
    const barX = 170;
    const barWidth = 18;
    const midY = (yTop + yBottom) / 2;

    // 1. Draw Rails
    ctx.beginPath();
    ctx.moveTo(railStart, yTop);
    ctx.lineTo(railEnd, yTop);
    ctx.moveTo(railStart, yBottom);
    ctx.lineTo(railEnd, yBottom);
    ctx.stroke();

    // 2. Draw Resistor
    const resX = railEnd;
    const resY1 = yTop;
    const resY2 = yBottom;
    const resWidth = 12; // width of zigzag
    const resHeight = resY2 - resY1;
    ctx.beginPath();
    ctx.moveTo(resX, resY1);
    ctx.lineTo(resX, resY1 + resHeight * 0.1);
    ctx.lineTo(resX + resWidth, resY1 + resHeight * 0.225);
    ctx.lineTo(resX - resWidth, resY1 + resHeight * 0.375);
    ctx.lineTo(resX + resWidth, resY1 + resHeight * 0.525);
    ctx.lineTo(resX - resWidth, resY1 + resHeight * 0.675);
    ctx.lineTo(resX + resWidth, resY1 + resHeight * 0.825);
    ctx.lineTo(resX, resY1 + resHeight * 0.9);
    ctx.lineTo(resX, resY2);
    ctx.stroke();
    // Label R
    ctx.font = '22px Times New Roman';
    ctx.fillText('R', resX + 25, midY);

    // 3. Draw Sliding Bar
    ctx.beginPath();
    ctx.rect(barX - barWidth / 2, yTop - 8, barWidth, yBottom - yTop + 16);
    ctx.stroke();

    // 4. Draw Velocity Vector
    const vArrowEndX = 30;
    const vArrowStartX = vArrowEndX + 70;
    drawArrow(vArrowStartX, midY, vArrowEndX, midY);
    // Label v
    ctx.font = 'italic 22px Times New Roman';
    const vTextX = vArrowStartX + 15;
    const vTextY = midY;
    ctx.fillText('v', vTextX, vTextY);
    // Vector arrow on top of v
    const vArrowOnTopY = vTextY - 15;
    drawArrow(vTextX + 6, vArrowOnTopY, vTextX - 6, vArrowOnTopY, 5);

    // 5. Draw Magnetic Field Symbol
    const bX = 300;
    const bY = midY;
    const bRadius = 11;
    // Circle
    ctx.beginPath();
    ctx.arc(bX, bY, bRadius, 0, 2 * Math.PI);
    ctx.stroke();
    // Dot
    ctx.beginPath();
    ctx.arc(bX, bY, 3, 0, 2 * Math.PI);
    ctx.fill();
    // Label B
    ctx.font = 'bold 22px Times New Roman';
    const bTextX = bX + bRadius + 18;
    const bTextY = bY;
    ctx.fillText('B', bTextX, bTextY);
    // Vector arrow on top of B
    const bArrowOnTopY = bTextY - 16;
    drawArrow(bTextX - 7, bArrowOnTopY, bTextX + 7, bArrowOnTopY, 5);

    // 6. Draw Length Label
    const lLineX = 420;
    // vertical line
    ctx.beginPath();
    ctx.moveTo(lLineX, yTop);
    ctx.lineTo(lLineX, yBottom);
    // top arrowhead pointing up
    ctx.moveTo(lLineX, yTop);
    ctx.lineTo(lLineX - 6, yTop + 8);
    ctx.moveTo(lLineX, yTop);
    ctx.lineTo(lLineX + 6, yTop + 8);
    // bottom arrowhead pointing down
    ctx.moveTo(lLineX, yBottom);
    ctx.lineTo(lLineX - 6, yBottom - 8);
    ctx.moveTo(lLineX, yBottom);
    ctx.lineTo(lLineX + 6, yBottom - 8);
    ctx.stroke();
    // Label l
    ctx.font = 'italic 24px Times New Roman';
    ctx.fillText('\u2113', lLineX + 20, midY);

</script>

</body>
</html>